<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="referrer" content="no-referrer">
    <meta charset="UTF-8">
    <title>Title</title>
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>树懒电影</title>
    <link rel="stylesheet" href="../static/css/show.css">
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <link rel="stylesheet" href="../static/css/table.css" type="text/css" />
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/jquery-1.7.2.min.js"></script>
</head>
<body>
    <!--主页面头部-->
    <div>
    <div id="header">
        <!--电影logo
        <div class="logo">
            <img src=".\img\logo.png" height="100px" width="100px" />
        </div>
        -->
        <div class="title"><h1 id="title">树懒电影</h1></div>
            <form action="#" class="parent">
                <input type="text" class="search" placeholder="电影名称，主演" id="search_head">
                <button id="search_head_btn" class="btn_search"></button>
            </form>
        <div>
        <div class="user-headface">
            <img id="userimg" height="80px" width="80px" src="{{ userdata[4] }}"/>
        </div>
        </div>
        <!--头像超链接到个人信息页面-->
    </div>
    <!-- ############################################################### -->
    <!--电影分类-->
    <div id="classfiy">
        <aside>
            <div class="classfiy_1">
            <i>类型:</i>
            <div class="classfiy_2">
                <span>全部</span>
                <span>剧情</span>
                <span>喜剧</span>
                <span>动作</span>
                <span>爱情</span>
                <span>惊悚</span>
                <span>犯罪</span>
                <span>悬疑</span>
                <span>战争</span>
                <span>科幻</span>
                <span>动画</span>
                <span>恐怖</span>
                <span>家庭</span>
                <span>传记</span>
                <span>冒险</span>
                <span>奇幻</span>
                <span>武侠</span>
                <span>历史</span>
            </div>
            </div>
        </aside>
        <aside>
            <div class="classfiy_1">
            <i>年份:</i>
            <div class="classfiy_2">
                <span>全部</span>
                <span>2021</span>
                <span>2020</span>
                <span>2019</span>
                <span>2018</span>
                <span>2017</span>
                <span>2016</span>
                <span>2015</span>
                <span>2014</span>
                <span>2013</span>
                <span>2012</span>
                <span>2011</span>
                <span>2010</span>
            </div>
            </div>
        </aside>
        <aside>
            <div class="classfiy_1">
            <i>地区:</i>
            <div class="classfiy_2">
                <span>全部</span>
                <span>内地</span>
                <span>中国香港</span>
                <span>中国台湾</span>
                <span>美国</span>
                <span>日本</span>
                <span>韩国</span>
                <span>印度</span>
                <span>泰国</span>
                <span>英国</span>
                <span>法国</span>
                <span>德国</span>
                <span>加拿大</span>
                <span>西班牙</span>
                <span>意大利</span>
                <span>澳大利亚</span>
            </div>
            </div>
        </aside>
        <aside>
            <div class="classfiy_1">
            <i>排列顺序:</i>
            <div class="classfiy_2">
                <span>热门(正序)</span>
                <span>热门(倒序)</span>
                <span>评分(正序))</span>
                <span>评分(倒序)</span>
                <span>时间(正序)</span>
                <span>时间(倒序)</span>
            </div>
            </div>
        </aside>
        <div class="last">已选择:
            <div id="yi"></div>
        </div>
        <!-- ############################################################### -->
    </div>
    <!--电影分类模块结束-->
    <div id="main">
        <div class="cat"></div>
        <div class="content">
            <ul style="width: 100%;margin-left:300px; list-style: none" class="ul_show">
            </ul>
        </div>
    </div>
    <div class="btn_local">
        <button id="json_more" class="btn_div">加载更多</button>
    </div>
<!--电影热播榜-->
<div class="sidebar"></div>
<div class="lunbo_div">
        <div>
            <img class="cup" src="../static/img/cup.png" />
            <span class="today_title">电影TOP30</span><br/>
        </div>
        <div id="bm_content" class="bm_content">
            <table class="table table-condensed ">
                <thead style="position: fixed; background-color: #eeeeee; ">
                    <tr>
                        <th style=" width: 80px; text-align: center;">电影名</th>
                        <th style="width: 80px; text-align: center;">评分</th>
                        <th style=" width: 80px; padding-right: 10px;">排名</th>
                    </tr>
                </thead>
                <tbody id="tb1"></tbody>
                <tbody id="tb2"></tbody>
            </table>
        </div>
</div>
</div>
</body>
</html>

<script>
    var head_btn=document.getElementById("search_head_btn");
    head_btn.onclick=function (){
        var head_input=document.getElementById("search_head").value;
        window.open("/head_for_html"+"?title_star="+head_input,'_blank')
    }
    //加载更多js
        var btn=document.getElementById("json_more");
        json_num=20;
        btn.onclick=function(){
            $.ajax({
                    url: "/query_tag",
                    data: {
                        type:oDivLength[7],date:oDivLength[9],area:oDivLength[11],
                        first:oDivLength[13],num:json_num
                    },
                    success: function (data) {
                        if(data.data==""){
                            alert("暂无数据！")
                        }else{
                            for (var i = 0; i < data.data.length; i++) {
                                a="/movie_page?"+"title="+data.data[i][0]+"&scorenum="+data.data[i][7];
                                appendUlBody ="<li> <p class='picture'>"
                                    +"<img src="+"'"+data.data[i][8]+"'"+" height='200px' width='140px' referrer='no-referrer'/></p>"
                                    +"<p class='instroction'>"
                                    +'<a href="'+a+'" style="text-decoration:none;" target="_blank" >'
                                    +data.data[i][0]+"</a><br><br>导演: "+leave_out(data.data[i][2])+"<br>主演: "+leave_out(data.data[i][1])+"<br>"
                                    +data.data[i][4]+"/"+data.data[i][5]+"<br>"+data.data[i][6]+"<br>"+data.data[i][3]+"分<br>"+data.data[i][7]+"人评价</p></li>"
                                $(".ul_show").append(appendUlBody);
                            }
                            json_num=json_num+20;
                        }
                    },
                    error: function (xhr, type, errorThrown) {
                    }
            })
        }
        //分类js
        var oDivLength = [];
        var div = document.getElementsByTagName('div');
        var divSpan = document.getElementsByTagName('span');
        //判断有几个列表
        for (var i = 0; i < div.length; i++) {
            div[i].index = i;//给所有div标序号
        }
        oDivLength[7]="全部";
        oDivLength[9]="全部";
        oDivLength[11]="全部";
        oDivLength[13]="热门(正序)";
        $.ajax({
            url: "/query_tag",
            data: {
                type:"全部",date:"全部",area:"全部",
                first:"热门(正序)",num:"0"
            },
            success: function (data) {
                $(".ul_show").empty()
                if(data.data==""){
                    alert("暂无数据！")
                }else{
                    for (var i = 0; i < data.data.length; i++) {
                        a="/movie_page?"+"title="+data.data[i][0]+"&scorenum="+data.data[i][7];
                        appendUlBody ="<li> <p class='picture'>"
                            +"<img src="+"'"+data.data[i][8]+"'"+" height='200px' width='140px' referrer='no-referrer'/></p>"
                            +"<p class='instroction'>"
                            +'<a href="'+a+'" style="text-decoration:none;" target="_blank" >'
                            +data.data[i][0]+"</a><br><br>导演: "+leave_out(data.data[i][2])+"<br>主演: "+leave_out(data.data[i][1])+"<br>"
                            +data.data[i][4]+"/"+data.data[i][5]+"<br>"+data.data[i][6]+"<br>"+data.data[i][3]+"分<br>"+data.data[i][7]+"人评价</p></li>"
                        $(".ul_show").append(appendUlBody);
                    }
                }
            },
            error: function (xhr, type, errorThrown) {
            }
        })
        for (var i = 0; i < divSpan.length; i++) {
            divSpan[i].onclick = function() {
                oDivLength[this.parentElement.index] = this.innerText//标签的文本;获取对应的文本，其中下标为对应div的序号，从5开始
                var oChild = this.parentElement.children;//获取div下的所有span标签
                for (var j = 0; j < oChild.length; j++) {
                    oChild[j].className = '';//将classname设为“”
                }
                this.className = 'mystyle'; //已选中的当前列的当前元素添加样式
                document.getElementById('yi').innerHTML = ''//标签的html文本;
                for (var m = 0; m < oDivLength.length; m++) { //放到已选择里面
                    if (oDivLength[m] == '' || oDivLength[m] !== undefined) {
                        var para = document.createElement("span");
                        var node = document.createTextNode(oDivLength[m]);
                        para.appendChild(node);
                        document.getElementById('yi').appendChild(para);
                    }
                }
                $.ajax({
                    url: "/query_tag",
                    data: {
                        type:oDivLength[7],date:oDivLength[9],area:oDivLength[11],
                        first:oDivLength[13],num:"0"
                    },
                    success: function (data) {
                        $(".ul_show").empty()
                        if(data.data==""){
                            alert("暂无数据！")
                        }else{
                            for (var i = 0; i < data.data.length; i++) {
                                a="/movie_page?"+"title="+data.data[i][0]+"&scorenum="+data.data[i][7];
                                appendUlBody ="<li> <p class='picture'>"
                                    +"<img src="+"'"+data.data[i][8]+"'"+" height='200px' width='140px' referrer='no-referrer'/></p>"
                                    +"<p class='instroction'>"
                                    +'<a href="'+a+'" style="text-decoration:none;" target="_blank" >'
                                    +data.data[i][0]+"</a><br><br>导演: "+leave_out(data.data[i][2])+"<br>主演: "+leave_out(data.data[i][1])+"<br>"
                                    +data.data[i][4]+"/"+data.data[i][5]+"<br>"+data.data[i][6]+"<br>"+data.data[i][3]+"分<br>"+data.data[i][7]+"人评价</p></li>"
                                $(".ul_show").append(appendUlBody);
                            }
                        }
                    },
                    error: function (xhr, type, errorThrown) {
                    }
                })
            }
        }
        //点击完毕后有数据的为下标5,6,7,8
        function leave_out(str){
            if(str.length>=20)
            {
                str=str.substring(0,20)+"..."
            }
            return str
        }
//top榜js
//获取数据
        var toplist=[]
        $.ajax({
            url: "/get_top",
            success: function (data) {
                toplist=data.data
                console.log(toplist[0].topname)
                console.log(toplist[0].topscore)
                console.log(toplist[0].toptime)
                console.log(toplist[0].toprank)
                var str = '';
            for (var i = 0; i < 29; i++) {
                var topname=toplist[i].topname
                var topscore=toplist[i].topscore
                var toptime=toplist[i].toptime
                var toprank=toplist[i].toprank
                str += '<tr>';
                str += '<td class="ellipsis">';
                str += '<span class="center" title="'+topname+'" style="margin-left: 5px;">'+topname+'</span>';
                str += '</td>';

                str += '<td class="ellipsis" title="'+topscore+'"><div class="d_score">'+topscore+'</div></td>';

                str += '<td class="ellipsis" title="'+toprank+'" id="toprank">'+toprank+'</td>';
                str += ' </tr>';
                }
            var box = document.getElementById("bm_content");
            var l1 = document.getElementById("tb1");
            var l2 = document.getElementById("tb2");
            var product = str;
            l1.innerHTML = product;
            if (l1.offsetHeight > box.offsetHeight) {
                l2.innerHTML = l1.innerHTML;//克隆list1的数据，使得list2和list1的数据一样
                scrollMove = setInterval(scrollup, 30);//数值越大，滚动速度越慢
                box.onmouseover = function () {
                    clearInterval(scrollMove)
                    }
                }
            function scrollup() {
            //滚动条距离顶部的值恰好等于list1的高度时，达到滚动临界点，此时将让scrollTop=0,让list1回到初始位置，实现无缝滚动
            if (box.scrollTop >= l1.offsetHeight) {
                box.scrollTop = 0;
                } else {
                box.scrollTop++;
                    }
                }
                //鼠标离开时，滚动继续
                box.onmouseout = function () {
                    scrollMove = setInterval(scrollup, 30);
                }
            }
        })
    </script>

    <script>
    var head_picture=document.getElementById("userimg")
     head_picture.onclick=function(){
        window.open("/user_pager",'_blank')
     }
    </script>